<!-- <ad-custom
          v-if="item.type === 'ad'"
          unit-id="adunit-b89464d270c0cf46"
          bindload="adLoad"
          binderror="adError"
          bindclose="adClose"
          class="w-full h-full"
        /> -->

<script setup lang="ts">
import { ref } from "vue";

import useList from "@/hooks/useList";
import ApiApp from "@/api/app";

import { TBanner } from "@/global";
import Taro from "@tarojs/taro";

defineProps<{
  list?: string[];
}>();

const activeIndex = ref(0);
const handleChange = (e) => {
  const { current } = e.detail;
  activeIndex.value = current;
};

// banner列表
const { list } = useList<TBanner>(ApiApp.getContent, {
  search: { type: 7, category: 2 },
});

// 点击事件
const handleTap = ({ jump_type, jump_url }: TBanner) => {
  if (!jump_url) return;

  switch (jump_type) {
    case 1:
      jumpInner(jump_url);
      break;
    // 仅支持短链
    case 2:
      Taro.navigateToMiniProgram({ shortLink: jump_url });
      break;
    // h5
    case 3:
      Taro.navigateTo({
        url: `/pages/webview/index?src=${encodeURIComponent(jump_url)}`,
      });
      break;
    // 打开公众号文章
    // @ts-ignore
    case 4:
      Taro.openOfficialAccountArticle({ url: jump_type });
      break;
  }
};

const tabPages = [
  "/pages/index/index",
  "/pages/merchant/index",
  "/pages/mine/index",
];

// 小程序内跳转
const jumpInner = (url: string) => {
  if (url) {
    const event = tabPages.includes(url) ? "reLaunch" : "navigateTo";
    Taro[event]({ url });
  }
};
</script>

<template>
  <swiper
    class="h-[740px] mt-6 mx-auto"
    :circular="true"
    :display-multiple-items="1"
    previous-margin="128rpx"
    next-margin="128rpx"
    @change="handleChange"
  >
    <swiper-item v-for="(item, index) in list" :key="index">
      <view
        class="relative w-full h-full duration-200 swiper-card overflow-hidden"
        :style="{
          transform: index == activeIndex ? 'scale(1)' : 'scale(0.85)',
        }"
        @tap="handleTap(item)"
      >
        <image :src="item.img" class="w-full h-full rounded-lg" />
      </view>
    </swiper-item>
  </swiper>
</template>

<style lang="less">
.swiper-card {
  box-shadow: 6px 2px 16px 0 rgba(0, 0, 0, 0.15);
}
</style>
